<template>
  <!-- <div id="mainwagersoldedgague" style="width: 100%; height: 100%"></div> -->
  <div style="diaplay: flex; flex-direction: column; width: 100%; height: 100%">
      <div class="menu">
        <el-radio-group v-model="menu"  @change="change">
          <el-radio label="出厂水" ></el-radio>
          <el-radio label="末梢水"></el-radio>
        </el-radio-group>
      </div>
<!--      <el-button :class="[factoryWater === true ? 'factoryWater1' : 'factoryWater0']" @click="temperatureHandel">出厂水</el-button>-->
<!--      <el-button :class="[endWater === true? 'endWater1' : 'endWater0']" @click="moistureHandel">末梢水</el-button>-->
<!--    </div>-->
    <div id="mainwagersoldedgague" style="width: 100%; height: 90%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";

export default {
  mixins: [resize],
  props: ["waterLvData"],
  data() {
    return {
      menu:'出厂水',
      factoryWater:false,
      endWater:false,
      chart: null,
      factoryWaterData: [[120, 102, 156, 145, 190],
        [320, 102, 291, 187, 190],
        [260, 282, 156, 256, 310],
        [230, 246, 187, 214, 289]],
      endWaterData: [[120, 132, 101, 134, 90],
        [220, 182, 191, 234, 290],
        [220, 182, 191, 234, 290],
        [220, 182, 191, 234, 290]],
      optiondata: null,
      momWaterRatio: "",
      qoqWaterRatio: "",
    };
  },
  watch: {
    waterSoledRatio() {
      this.momWaterRatio = this.waterSoledRatio.momWaterRatio;
      this.qoqWaterRatio = this.waterSoledRatio.qoqWaterRatio;
      // this.chartData=[]
      // for (let i in this.waterSoledRatio){
      //   this.chartData.push(this.waterSoledRatio[i])
      // }
      this.initChart();
    },
    // chartData: {
    //   deep: true,
    //   handler(val) {
    //     this.setOptions(val);
    //   },
    // },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(this.factoryWaterData);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    change(val){
      if (val === '出厂水'){
        this.initChart(this.factoryWaterData)
      }else if (val === '末梢水'){
        this.initChart(this.endWaterData)
      }
    },
    initChart(data) {
      if (!this.chart) {
        this.chart = echarts.init(
          document.getElementById("mainwagersoldedgague"),
          "macarons"
        );
      }
      this.setOptions(data);
    },
    setOptions(data) {
      this.optiondata = {
        // title: {
        //   left: "3%",
        //   top: 1,
        //   text: 'PH监控',
        //   textStyle: {
        //     // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        //     // fontWeight: "bolder",
        //     fontSize: 12,
        //     color: "#ffffff",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: ['rgba(25, 255, 162, 0.7)','rgba(255, 218, 51, 0.7)','rgba(77, 205, 243, 0.7)','rgba(255, 0, 0, 0.7)','rgba(25, 255, 162, 0.7)','rgba(255, 218, 51, 0.7)','rgba(77, 205, 243, 0.7)','rgba(255, 0, 0, 0.7)'],
        legend: {
          data: ["达标", "不达标", "超标", "异常"],
          padding: [0, 0, 0, 0],
          top: 10,
          // left: 0,
          right: 0,
          textStyle: { color: "#fff",fontSize:'10px' },
          itemWidth: 10,
          itemHeight: 5,
        },
        grid: {
          left: "0",
          top: "30",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: ["1", "2", "3", "4", "5"],
            // axisLine: {
            //   lineStyle: {
            //     color: "rgba(255,255,255,0.12)",
            //   },
            // },
            // axisLabel: {
            //   //   margin: 10,
            //   color: "#e2e9ff",
            //   textStyle: {
            //     fontSize: 14,
            //   },
            // },
          },
        ],
        yAxis: [
          {
            splitNumber: 3,
            // axisLabel: {
            //   formatter: "{value}",
            //   color: "#e2e9ff",
            // },
            axisLine: {
              show: false,
            },
            // splitLine: {
            //   lineStyle: {
            //     color: "rgba(255,255,255,0.12)",
            //     type: "dotted",
            //   },
            // },
          },
        ],
        series: [
          {
            name: "达标",
            type: "bar",
            stack: "出厂水",
            data:data[0],
            barWidth: 15,
          },
          {
            name: "不达标",
            type: "bar",
            stack: "出厂水",
            data:data[1],
            barWidth: 15,
            // itemStyle: {
            //   normal: {
            //     barBorderRadius: [30, 30, 0, 0],
            //   },
            // },
          },
          {
            name: "超标",
            type: "bar",
            stack: "出厂水",
            data:data[2],
            barWidth: 15,
            // itemStyle: {
            //   normal: {
            //     barBorderRadius: [30, 30, 0, 0],
            //   },
            // },
          },
          {
            name: "异常",
            type: "bar",
            stack: "出厂水",
            data: data[3],
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 0, 0],
              },
            },
          },


          // {
          //   name: "末梢水达标",
          //   type: "bar",
          //   stack: "末梢水",
          //   data: [120, 132, 101, 134, 90],
          //   barWidth: 15,
          // },
          // {
          //   name: "末梢水不达标",
          //   type: "bar",
          //   stack: "末梢水",
          //   data: [220, 182, 191, 234, 290],
          //   barWidth: 15,
          //   // itemStyle: {
          //   //   normal: {
          //   //     barBorderRadius: [30, 30, 0, 0],
          //   //   },
          //   // },
          // },
          // {
          //   name: "末梢水超标",
          //   type: "bar",
          //   stack: "末梢水",
          //   data: [220, 182, 191, 234, 290],
          //   barWidth: 15,
          //   // itemStyle: {
          //   //   normal: {
          //   //     barBorderRadius: [30, 30, 0, 0],
          //   //   },
          //   // },
          // },
          // {
          //   name: "末梢水异常",
          //   type: "bar",
          //   stack: "末梢水",
          //   data: [220, 182, 191, 234, 290],
          //   barWidth: 15,
          //   itemStyle: {
          //     normal: {
          //       barBorderRadius: [30, 30, 0, 0],
          //     },
          //   },
          // },
        ],
      };

      this.chart.setOption(this.optiondata);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-radio__inner{
  width: 8px;
  height: 8px;
}
::v-deep .el-radio__label{
  font-size: 8px;
}
.menu{
  position: relative;
  top:-5px;
  text-align:center;
  height: 15px;
}
.factoryWater0 ,.factoryWater0{
  background-color: rgba(0,0,0,0);
  border:none;
  margin:auto 10px;
  display: inline-block;
  background-image: url(~@/assets/images/dataScreen/button0.png);
  background-size: 100% 100%;
  width:80px;
  height: 30px;
  text-align: center;
  line-height: 0px;
  color: rgb(19, 154, 232)
}
.endWater1 , .endWater1{
  background-color: rgba(0,0,0,0);
  border:none;
  margin:auto 10px;
  display: inline-block;
  background-image: url(~@/assets/images/dataScreen/button1.png);
  background-size: 100% 100%;
  width:80px;
  height: 30px;
  text-align: center;
  line-height: 0px;
  color: rgb(242, 186, 65)
}
</style>
